<template>
  <!-- 断层分布图、地震构造图预览 -->
  <el-dialog v-model="open" @open="initOpen" @close="cancelMap" width="1000px" custom-class="resultPreview"
    :close-on-click-modal="false">
    <template #title>
      <svg-icon icon-class="list"></svg-icon>
      <span style="padding: 0 10px">{{ title }}结果预览</span>
    </template>
    <template #default>
      <el-form :model="mapForm" ref="mapRef" :rules="rules" label-width="100px" v-loading="loading"
        :element-loading-spinner="svg" element-loading-text="出图中......" element-loading-svg-view-box="0, 0, 50, 50">
        <el-row>
          <template v-if="type == templateType[0].value">
            <el-col :span="16">
              <el-form-item label="图片标题" prop="title">
                <el-input v-model="mapForm.title" type="textarea" show-word-limit :autosize="{ minRows: 2, maxRows: 4 }"
                  resize="none"></el-input>
              </el-form-item>
              <el-form-item label="" prop="previewImg" label-width="0">
                <ImagePreview :src="`data:image/png;base64,${mapForm.previewImg}`"
                  :previewList="[`data:image/png;base64,${mapForm.previewImg}`]" />
              </el-form-item>
              <el-row><el-col style="text-align: center">示例图</el-col></el-row>
            </el-col>
            <el-col :span="8">
              <el-form-item label="震级" prop="mm">
                <el-input v-model="mapForm.mm" v-inputNumber="1" placeholder="保留一位小数"></el-input>
              </el-form-item>
              <el-form-item label="经度" prop="longitude">
                <el-input v-model="mapForm.longitude" v-inputNumber="2" placeholder="保留两位小数"></el-input>
              </el-form-item>
              <el-form-item label="纬度" prop="latitude">
                <el-input v-model="mapForm.latitude" v-inputNumber="2" placeholder="保留两位小数"></el-input>
              </el-form-item>
              <el-form-item label="发震时刻" prop="earthquakeDate">
                <el-date-picker v-model="mapForm.earthquakeDate" type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
              </el-form-item>
              <el-form-item label="参考位置" prop="location">
                <el-input v-model="mapForm.location"></el-input>
              </el-form-item>
              <el-form-item label="制图时间" prop="drawDate">
                <el-date-picker v-model="mapForm.drawDate" value-format="YYYY-MM-DD"></el-date-picker>
              </el-form-item>
              <el-form-item label="制图单位" prop="drawingUnit">
                <el-input v-model="mapForm.drawingUnit"></el-input>
              </el-form-item>
              <el-form-item label="模板选择" prop="copyChoice">
                <el-select v-model="mapForm.copyChoice" placeholder="请选择" style="width:100%">
                  <el-option v-for="item in templateList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="深度" prop="epiDepth">
                <el-input v-model="mapForm.epiDepth" v-inputNumber="0" placeholder="整数">
                  <template #append>千米</template>
                </el-input>
              </el-form-item>
            </el-col>
          </template>

          <template v-if="type === templateType[1].value">
            <el-col :span="16">
              <el-form-item label="图片标题" prop="title">
                <el-input v-model="mapForm.title" type="textarea" show-word-limit :autosize="{ minRows: 2, maxRows: 4 }"
                  resize="none" maxlength="50"></el-input>
              </el-form-item>
              <el-form-item label="" label-width="0">
                <ImagePreview :src="`data:image/png;base64,${mapForm.previewImg}`"
                  :previewList="[`data:image/png;base64,${mapForm.previewImg}`]" />
              </el-form-item>
              <el-row><el-col style="text-align: center">示例图</el-col></el-row>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="描述" prop="description" label-width="50px">
                <el-input v-model="mapForm.description" type="textarea" show-word-limit
                  :autosize="{ minRows: 2, maxRows: 4 }" resize="none"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="" label-width="0">
                <ImagePreview :src="`data:image/png;base64,${mapForm.previewImg}`"
                  :previewList="[`data:image/png;base64,${mapForm.previewImg}`]" />
              </el-form-item>
              <el-row><el-col style="text-align: center">示例图</el-col></el-row>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="描述" prop="description">
                <el-input v-model="mapForm.description" type="textarea" show-word-limit
                  :autosize="{ minRows: 15, maxRows: 15 }" resize="none"></el-input>
              </el-form-item>
              <el-form-item label="制图时间" prop="drawDate">
                <el-date-picker v-model="mapForm.drawDate" value-format="YYYY-MM-DD"></el-date-picker>
              </el-form-item>
              <el-form-item label="制图单位" prop="drawingUnit">
                <el-input v-model="mapForm.drawingUnit"></el-input>
              </el-form-item>
              <el-form-item label="模板选择" prop="copyChoice">
                <el-select v-model="mapForm.copyChoice" placeholder="请选择" style="width:100%">
                  <el-option v-for="item in templateList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="深度" prop="epiDepth">
                <el-input v-model="mapForm.epiDepth" v-inputNumber="0" placeholder="整数">
                  <template #append>千米</template>
                </el-input>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </el-form>
    </template>
    <template #footer>
      <div style="text-align: right;">
        <!-- <el-button plain @click="cancelMap">取消</el-button>
        <el-button type="primary" @click="confirmMap" :disabled="loading">确定出图</el-button> -->
        <el-button type="primary" @click="confirmMap" :disabled="loading">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <ResultView v-model:open="resultViewOpen" :title="title" :attachId="attachId" />
</template>
<script setup>
import { useNow, useDateFormat } from '@vueuse/core'
import ResultView from './resultView.vue'
import { getImgUrl, getTemplate, saveMap } from '@/api/quickMapping/quickMapping/index'
import ImagePreview from '@/views/quickMapping/common/imagePreview'
import { templateType } from '@/views/quickMapping/common/const'

const props = defineProps({
  open: Boolean,
  title: String,
  data: Object,
  type: String
})
const emits = defineEmits(['update:open'])
const { proxy } = getCurrentInstance()
const svg = `
        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="var(--el-color-primary)" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path></svg>
      `

const initMapForm = () => ({})
const mapForm = ref(initMapForm())
const resultViewOpen = ref(false)
const attachId = ref('')
const loading = ref(false)
const rules = {
  title: [{ required: true, message: '请填写图片标题！', trigger: 'blur' }],
  mm: [{ required: true, message: '请填写震级！', trigger: 'blur' }],
  epiDepth: [{ required: true, message: '请填写深度！', trigger: 'blur' }],
  longitude: [{ required: true, message: '请填写经度！', trigger: 'blur' }],
  latitude: [{ required: true, message: '请填写纬度！', trigger: 'blur' }],
  earthquakeDate: [{ required: true, message: '请填写发震时刻！', trigger: 'change' }],
  location: [{ required: true, message: '请填写参考位置！', trigger: 'blur' }],
  drawDate: [{ required: true, message: '请填写制图时间！', trigger: 'change' }],
  drawingUnit: [{ required: true, message: '请填写制图单位！', trigger: 'blur' }],
  copyChoice: [{ required: true, message: '请选择模板！', trigger: 'change' }]
}
// 确定出图
let cancelFunc = {}
const confirmMap = () => {
  proxy.$refs['mapRef'].validate(valid => {
    if (valid) {
      loading.value = true
      if (typeof cancelFunc.c == 'function') {
        cancelFunc.c('取消制图成功')
      }
      saveMap({ ...mapForm.value, type: props.type, previewImg: '' }, cancelFunc).then(res => {
        if (res.code == 200) {
          emits('update:open', false)
          resultViewOpen.value = true
          attachId.value = res.data.attach.attachId
        }
        loading.value = false
      }).catch(err => {
        if (err.message == '取消制图成功') {
          cancelFunc.c = null
          loading.value = false
        }
      })
    }
  })
}
const initOpen = () => {
  getImgBase64(props.type)
  getTemplateList(props.type)
  mapForm.value = { ...props.data }

  let { location, mm, earthquakeDate, latitude, longitude, epiDepth, province, city, county } = props.data
  if (props.type == templateType[0].value) {
    location = location || province + city + county
    mapForm.value.title = `${location}${mm}级地震震中附近活动断层分布图`
    mapForm.value.location = location
  } else {
    location = location || province + city + county
    mapForm.value.title = `${earthquakeDate?.split(' ')[0]}${location}${mm}级地震构造图`
    mapForm.value.description = `中国地震台网正式测定：${useDateFormat(useNow(), 'YYYY年MM月DD日hh时mm分').value}在${location}（北纬${latitude}度，东经${longitude}度）发生${mm}级地震，震源深度${epiDepth}千米。`
  }
  mapForm.value.drawingUnit = localStorage.getItem('orgName')
  mapForm.value.drawDate = useDateFormat(useNow(), 'YYYY-MM-DD').value
}
const cancelMap = () => {
  if (typeof cancelFunc.c === "function") {
    cancelFunc.c('取消制图成功')
  }
  proxy.resetAllForm(mapForm.value, initMapForm())
  proxy.resetForm('mapRef')
  emits('update:open', false)
}
// 获取模板
const templateList = ref([])
const getTemplateList = (type) => {
  getTemplate(type).then(res => {
    templateList.value = res.data
    mapForm.value.copyChoice = res.data[0].id
  })
}
// 获取图片
const getImgBase64 = (type) => {
  getImgUrl(type).then(res => {
    if (res.data) {
      mapForm.value.previewImg = res.data
    }
  })
}
</script>

<style lang="scss">
.el-dialog__header {
  text-align: left;
}

.el-input__prefix,
.el-input__prefix-inner,
.el-input__suffix,
.el-input__suffix-inner {
  color: var(--el-text-color-placeholder) !important;
  width: auto !important;
  font-size: 14px !important;
  border-bottom: none !important;
  // line-height: unset !important;
  height: 100% !important;
}

.el-dialog__footer {

  .el-button {
    &>span {
      border-bottom: none;
      color: unset;
      font-size: unset;
      width: unset;
      height: unset;
    }
  }
}
</style>
<style lang="scss" scoped>
.resultPreview {

  .el-dialog__header {

    &>span {
      color: #6a798d;
      width: auto;
      font-size: 18px;
      border-bottom: none;
      line-height: unset;
      height: unset;
    }
  }

  .preview-image {
    width: 100%;
    height: 100%;
  }

  .el-image {
    // padding: 0 5px;
    width: 100%;
    min-height: 200px;

    :deep(img) {
      width: 100%;
      height: 100%;
      margin-top: 0;
      padding: 0;
    }
  }

  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 30px;
  }

  .image-slot .el-icon {
    font-size: 30px;
  }
}
</style>